<template>
  <div class="container">
    <div
      id="goodsNumber"
      ref="chart"
      :style="{
        float: 'left',
        width: '50%',
        height: '430px',
        margin: '25px 0px 0px 0px',
      }"
    ></div>
    <div
      id="peopleNumber"
      ref="chart"
      :style="{
        float: 'right',
        width: '45%',
        height: '430px',
        margin: '20px 20px 0px 0px',
      }"
    ></div>
  </div>
</template>
 
<script>
import service from "../../utils/request";
import * as echarts from "echarts";
export default {
  data() {
    return {
      adminId: "",
    };
  },
  mounted() {
    // 统计某个门店下的所有商品数量
    var goodsNumberDom = document.getElementById("goodsNumber");
    var goodsChart = echarts.init(goodsNumberDom);
    goodsChart.setOption({
      title: {
        text: "门店评分统计",
        left: "center",
      },
      xAxis: {
        type: "category",
        data: [],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [],
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)",
          },
        },
      ],
    });
    // 获取管理员
    let adminPosition = localStorage.getItem("roleInfo");
    // 如果是平台管理员则渲染所有的门店
    if (adminPosition == 0) {
      service.get("/shopDoors").then((shopDoors) => {
        let flagShopDoor = shopDoors.rows.filter((item) => item.isFlag == 1);
        let goodsNameArr = flagShopDoor.map((item, index) => {
          return item.name.substring(index - 2, 7) + "...";
        });
        let goodsPriceArr = flagShopDoor.map((item) => item.score);
        goodsChart.setOption({
          xAxis: {
            type: "category",
            data: goodsNameArr,
          },
          series: [
            {
              data: goodsPriceArr,
              type: "bar",
              showBackground: true,
              backgroundStyle: {
                color: "rgba(180, 180, 180, 0.2)",
              },
            },
          ],
        });
      });
    }
    // 如果是门店管理员则渲染对应管理员旗下的门店
    else {
      // 派发管理员id
      // 获取本地保存的管理员id
      this.adminId = localStorage.getItem("adminId");
      service.get("/shopDoors").then((oneShopDoor) => {
        let matchShopDoor = oneShopDoor.rows
          .filter((item, index) => {
            return item.adminId;
          })
          .filter((item) => item.adminId._id == this.adminId)
          .filter((item) => item.isFlag == 1);
        let goodsNameArr = matchShopDoor.map((item) => item.name);
        let goodsPriceArr = matchShopDoor.map((item) => item.score);
        goodsChart.setOption({
          xAxis: {
            type: "category",
            data: goodsNameArr,
          },
          series: [
            {
              data: goodsPriceArr,
              type: "bar",
              showBackground: true,
              backgroundStyle: {
                color: "rgba(180, 180, 180, 0.2)",
              },
            },
          ],
        });
      });
    }
    // 统计用户、门店管理员、平台管理员的人数
    var peopleNumberDom = document.getElementById("peopleNumber");
    var peopleNumberChart = echarts.init(peopleNumberDom);
    peopleNumberChart.setOption({
      title: {
        text: "用户管理员占比统计",
        left: "center",
        height: "100px",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "horizontal",
        left: "center",
        bottom: "10%",
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: "50%",
          data: [
            { value: 2, name: "用户" },
            { value: 3, name: "平台管理员人数" },
            { value: 5, name: "门店管理员人数" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    });
  },
};
</script>
 
<style scoped>
.container {
  margin-top: 40px;
}
</style> 